<template>
    <view>
        <view class="dynamic" v-for="item in shares" :key="item.id">
            <view class="user__container">
                <view class="user__header-warp">
                    <!-- 头像组 -->
                    <view class="user__header" @click="clickUser()">
                        <image class="user__header-image" :src="`/gongyi/common/download?name=${item.avatar}`" mode="aspectFill"></image>
                    </view>
                </view>
                <view class="user__content">
                    <view class="user__content-main">
                        <text class="user__content-title uni-ellipsis" @click.stop="clickUser()">{{item.nickname}}</text>
                        <!-- <text class="user__content-note uni-ellipsis">撒娇哦赔付</text> -->
                    </view>
                    <view class="user__content-extra">

                    </view>
                </view>
            </view>


            <view class="wb_hide_2">{{item.textMessage}}</view>
            <view class="allImage">
                <view class="imgList">
                    <view class="images">
                        <image class="oneimg" v-if="item.pictureUrl" :src="`/gongyi/common/download?name=${item.pictureUrl}`" mode="aspectFill"></image>
                        <!-- <image class="oneimg" src="../../static/fonts/3.png" mode="aspectFill" ></image> -->
                    </view>

                </view>
                <view class="operate">
                    <uni-grid :column="3" :showBorder="false" :square="false">
                        <uni-grid-item>
							<!-- toggleMask('show') -->
							<view @click="goComment(item.id)">
									<uni-icons type="chatbubble" size="18"></uni-icons>
									评论
							</view>
                        </uni-grid-item>
                        <uni-grid-item >
                            <!--  -->
                            <span @click = "iconColor(item.id)?subLike(item.id):giveLike(item.id)">
                                <uni-icons v-if="iconColor(item.id) == false" type="heart" size="18" style="color: black;"></uni-icons>
                                <uni-icons v-if="iconColor(item.id) == true" type="heart" size="18" style="color: red;"></uni-icons>
                                <text v-if="item.likes == 0" >点赞</text>
                                <text v-if="item.likes != 0">{{item.likes}}</text>
                            </span>
                        </uni-grid-item>
                        <uni-grid-item>
                            <span @click="kkk">
                                <uni-icons type="minus-filled" size="18"
                                    style="margin-right: 2px;color:gray"></uni-icons>
                                举报
                            </span>
                        </uni-grid-item>
                    </uni-grid>
                </view>
                <view class="bottom-line"></view>
            </view>
        </view>

        <uni-fab horizontal="right" vertical="bottom" @fabClick="clickTo"></uni-fab>
    </view>
</template>

<script>
	import ygcComment from '@/components/ygc-comment/ygc-comment.vue';
    export default {
		components: {ygcComment},
        data() {
            return {
                shares:[],
                userInfo:{},
                share:{},
                likes:[],
                tag:false,
                // 默认激活样式是第一个
				
            }
        },
        onLoad() {
            this.userInfo = uni.getStorageSync("user");
            this.getLikes();
            // console.log(this.userInfo);
            this.queryAll();
        },
        onShow() {
            this.queryAll();
        },
        computed:{
            iconColor(){
                return id=>{
                    for (let i = 0; i < this.likes.length; i++) {
                        if(id == this.likes[i].shareId){
                            return true;
                        }
                    }
                    return false;
                };
            }
        },
        methods: {
				 // 点击评论事件
				clickComment(e){
				console.log(e);
				},
				// 点击头像/用户名称事件
				clickUser(e){
				console.log(e);
				},
            test(){
              console.log(this.iconColor)  
            },
            async getLikes(){
               await uni.request({
                   url:'/gongyi/user/getLikes?id='+this.userInfo.id,
                   method:'GET',
                   success: (res) => {
                       this.likes = res.data.likes;
                       console.log(this.likes);
                   }
               }) 
            },
            async subLike(shareId){
                console.log("inSubLike");
                await uni.request({
                    url:'/gongyi/share/subLike',
                    method:'GET',
                    data:{
                        id : shareId,
                        userId : this.userInfo.id
                    },
                    success: (res) => {
                        this.queryAll();
                        this.getLikes();
                        // console.log(res.data.res)
                    }
                })
            },
            async giveLike(shareId){
                console.log("inGiveLike");
                await uni.request({
                    url:'/gongyi/share/giveLike',
                    method:'GET',
                    data:{
                        id : shareId,
                        userId : this.userInfo.id
                    },
                    success: (res) => {
                        this.queryAll();
                        this.getLikes();
                        // console.log(res.data.res);
                    }
                })
            },
            clickTo() {
                uni.navigateTo({
                    url: "/pages/fenxiang/fenxiang"
                })
            },
            actionsClick(text) {
                uni.showToast({
                    title: text,
                    icon: 'none'
                })
            },
            async queryAll(){
                await uni.request({
                    url:'/gongyi/share/queryAll',
                    success: (res) => {
                        this.shares = res.data.shares;
                        // console.log(this.shares)
                    }
                })
            },
            kkk() {
                uni.navigateTo({
                    url: "/pages/taolun/complaint/complaint"
                })
            },
			goComment(id){
				uni.navigateTo({
					url:'/pages/taolun/comment?shareId='+id
				})
			}
        }
    }
</script>

<style lang="scss">
    .nnm {

        display: inline-block;


    }
    .blackHeart {
        background-color: black;
    }
    .redHeart{
        background-color: #fb5f5f;
    }

    .nnt {
        display: inline-block;
        float: left;
    }

    .card-actions-item {
        float: right;
        padding-left: 40rpx;
    }

    .nav {
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: whitesmoke;
        font-size: 30rpx;
        color: blue;
        letter-spacing: 2.14rpx;
    }

    .nav-list {
        width: 65rpx;
        height: 100%;
        margin-top: 40rpx;
        opacity: .9;
    }

    .nav-list .name {
        color: red;
    }

    .nav-list .line {
        margin-top: 10rpx;
        width: 65rpx;
        height: 4rpx;
        background-color: red;
    }


    .uni-list-chat__content-extra-text {
        color: #007AFF;
    }

    .dynamic {
        width: 100%;
    }

    .allImage {
        display: flex;
        margin-top: 10rpx;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .imgList {
        margin: 0 3%;
    }

    .images:not(:nth-child(3n)) {
        /* margin-right: 10rpx; */
    }
	.image-1 {
			flex-shrink: 0;
			margin-right: 10px;
			width: 25px;
			height: 25px;
			border-radius: 6px;
			overflow: hidden;
			border: 1px #f5f5f5 solid;
		}

    .text {
        margin: 1% 3% 2%;
    }

    .images {
        margin-right: 10rpx;
        display: inline-block;

        .oneimg {
            height: 300rpx;
            width: 300rpx;
            margin-right: 10rpx;
            display: inline-block;
        }
    }

    .operate {
        width: 94%;
        padding: 3%;
        font-size: 14px;
    }

    .chat-custom-right {
        flex: 1;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
    }

    .chat-custom-text {
        font-size: 12px;
        color: #999;
    }

    .bottom-line {
        border-bottom: 10px solid #efefef;
    }


    .user__container {
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        /* -webkit-flex-direction: row; */
        flex-direction: row;
        -webkit-box-flex: 1;
        /* -webkit-flex: 1; */
        flex: 1;
        padding: 10px 15px;
        position: relative;
        overflow: hidden;
    }

    .user__header {
        display: flex;
        width: 45px;
        height: 45px;
        -webkit-border-radius: 5px;
        border-color: #eee;
        border-width: 1px;
        border-style: solid;
        overflow: hidden;
        border-radius: 50px;
    }

    .user__header-image {
        display: flex;
        align-content: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        flex-wrap: wrap-reverse;
        width: 45px;
        height: 45px;
        border-radius: 5px;
        border-color: #eee;
        border-width: 1px;
        border-style: solid;
        overflow: hidden;
    }

    .user__content {
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-flex: 1;
        flex: 1;
        overflow: hidden;
        padding: 2px 0;
    }

    .user__content-main {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        padding-left: 10px;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        overflow: hidden;
    }

    .user__content-note {
        margin-top: 3px;
        color: #999;
        font-size: 12px;
        font-weight: normal;
        overflow: hidden;
    }

    .user__focus-on {
        padding: 3px 10px;
        border: 1px solid #fb5f5f;
        color: #fb5f5f;
        display: flex;
        font-size: 14px;
        border-radius: 3px;
    }

    .user__focus-off {
        padding: 3px;
        color: gray;
        font-size: 14px;
    }
    .wb_hide_2 {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      white-space: normal !important;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
</style>